import { GetProps, Input, Spin } from "antd";
import React, { useEffect } from "react";
import { useRef } from "react";

type OTPProps = GetProps<typeof Input.OTP>;
export default function PinPage(props: any) {
const loaded = useRef(false);
  const [mode, setMode] = React.useState("check");

  useEffect(() => {
    if (loaded.current) return;
    loaded.current = true;

    setMode("pass");
  }, []);

  const onChange: OTPProps['onChange'] = (pwd: string) => {
    setMode("check");
  };
  let lasttime = Date.now();
  const formatter: OTPProps['formatter'] = (value: string) => {
    const now = Date.now();
    if (value.length > 1 && (now-lasttime) < 100){
        const _1 = value [value.length-1];
        const _2 = value [value.length-2];
        if (_1 == _2) {
            value = value.substring(0, value.length-1);
            return value;
        }
    }
    lasttime = now;
    return value;
  };
  const sharedProps: OTPProps = {
    onChange,
    formatter,
  };
  return (<div>
    {mode == "check" ? <Spin />:<></>}
    {mode == "pass" ? <Input.OTP autoFocus variant="filled" mask="⚫" {...sharedProps} />:<></>}
  </div>);
}